<template>
  <demo />
  <hr />
  <BpmnView :xmlStr="bpmnXml" :highlightOptions="highlightOptions" />
  <hr />
  <div style="height: 800px">
    <BpmnDesigner :xmlStr="bpmnXml" @change="onChange" />
  </div>
</template>

<script>
import bpmnXml from "./demo.bpmn.js";

export default {
  name: "App",
  components: {},
  data() {
    return {
      bpmnXml,
      highlightOptions: {
        h__highPoint: ["Event_09ccqp5", "Activity_07td992"],
        h__iDo: ["Activity_1bj9xl3"],
        h__waitingToDo: ["Event_1w1dma1"],
      },
    };
  },
  methods: {
    onChange(xml) {
      console.log("xxx", xml);
    },
  },
};
</script>

<style lang="less"></style>
